<template>
  <div class="updateCourse">
    <Collapse v-model="foldPanel" @on-change="changeCollapse">
      <Panel name="详情">
        详情
        <div class="collapse-header">
          <Button size="default"
                  type="success"
                  @click="updateCourse">
            保存课时
          </Button>
        </div>
        <div class="collapse-header">
          <Button size="default"
                  type="info"
                  @click="goBack">返回
          </Button>
        </div>
        <div slot="content">

          <!--课时视频url-->
          <!-- https://wyxjava.oss-cn-shanghai.aliyuncs.com/1256640517379330048.mp4 -->
          <div class="urlBox">
            <Input
              prefix="ios-send"
              v-model="course.courseDetails.courseUrl"
              placeholder="输入课时视频 URL"/>
          </div>

          <!--上传视频-->
          <div class="collapse-inputBox">
            <div class="style" @click="uploadFile">
              <!--图片样式-->
              <img src="../../assets/home/upload.png">
              <br>
              点我上传 【视频内容 < 5GB】
            </div>

            <!--图片预览-->
            <div class="preview">
              <video :src="course.courseDetails.courseUrl" controls width="300px" height="120px">
              </video>
            </div>
          </div>

          <!--详情box-->
          <div class="collapse-details-box">
            <div class="left">
              <div class="text">课时名称：</div>
              <div class="text">课时评分：</div>
              <div class="text">视频时长：</div>
              <div class="text">VIP：</div>
            </div>
            <div class="right">
              <div class="input">
                <Input
                  prefix="ios-calendar-outline"
                  v-model="course.courseName"
                  placeholder="输入课时名称"/>
              </div>
              <div class="score">
                <Input
                  prefix="md-checkbox-outline"
                  v-model="course.courseDetails.courseScore"
                  placeholder="评分"/>
              </div>
              <div class="time">
                <TimePicker
                  v-model="course.courseDetails.courseTime"
                  confirm
                  placeholder="时长"
                  style="width: 168px">
                </TimePicker>
              </div>
              <div class="radio">
                <RadioGroup v-model="vipFlag">
                  <Radio label="是"></Radio>
                  <Radio label="否"></Radio>
                </RadioGroup>
              </div>
            </div>
          </div>
        </div>
      </Panel>

      <Panel name="资料">
        资料
        <div class="collapse-header">
          <Button size="default"
                  class="collapse-header-data-order"
                  @click="orderData">
            资料排序
          </Button>
          <Button size="default"
                  type="success"
                  @click="addData">
            保存资料
          </Button>
        </div>
        <div slot="content">
          <div class="collapse-data-table-box">
            <div class="header">
              <div class="name">资料名称</div>
              <div class="url">资料URL</div>
              <!--<div class="type">类型</div>
              <div class="order">排序</div>-->
            </div>
            <!--课时资料-->
            <div v-for="(obj,i) in courseData">
              <Button size="small" type="error" @click="delCourseData(i)">×</Button>
              <Input
                prefix="ios-calendar-outline"
                style="width: 300px;margin-left: 30px;"
                v-model="courseData[i].dataName"
                placeholder="资料名称"/>
              <Input
                style="width: 700px;margin-top: 5px"
                v-model="courseData[i].dataUrl"
                placeholder="资料URL">

                <Icon
                  type="ios-send"
                  slot="prefix"
                  @click="openCourseDataUrl(courseData[i].dataUrl)"/>
              </Input>
            </div>
          </div>
          <!--添加课时资料-->
          <div class="add" style="margin-top: 10px">
            <Button size="small" type="info" @click="addCourseData">+</Button>
          </div>
        </div>
      </Panel>

      <Panel name="题目">
        题目
        <div class="collapse-header">
          <Button size="default"
                  type="success"
                  @click="addQuestion">
            保存题目
          </Button>
        </div>
        <div slot="content">
        </div>
      </Panel>

      <Panel name="评价">
        评价
        <div slot="content">
          {{courseData}}
        </div>
      </Panel>
    </Collapse>

    <!--资料排序-->
    <Modal
      v-model="orderDataTipPanel"
      @on-ok="okOrderData"
      @on-cancel="cancelOrderData">
      <div slot="header">
        <span class="modal-warning" style="height: 20px;line-height: 20px;font-size: 16px;">
          拖拽排序
        </span>
      </div>
      <div class="modal-data-box-order">
        <Table
          stripe
          :show-header="false"
          size="small"
          draggable
          style="margin: 10px"
          :columns="columnsCourseData"
          :data="courseData"
          @on-drag-drop="showOrderData">

          <!--课时名-->
          <template slot-scope="{ row, index }" slot="dataName">
            <div style="width: 100%;height: 100%">
              {{row.dataName}}
            </div>
          </template>

        </Table>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        //课程id
        subjectId: this.$route.query.sid,
        //章节id
        chapterId: this.$route.query.chid,
        //课程id
        courseId: this.$route.query.cid,
        //折叠面板
        foldPanel: ["详情"],
        //vip
        vipFlag: "否",
        //文件信息
        fileInfo: {
          file: Object,
          fileUrl: this.chartUrl,
          resp: Object
        },
        //参考资料
        courseData: [],
        //资料排序
        orderDataTipPanel: false,
        //资料排序列表
        columnsCourseData: [
          {
            title: "序号",
            type: 'index',
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "资料名称",
            slot: 'dataName',
            key: 'dataName',
          }
        ],
        //课时信息
        course: {
          courseId: "",
          courseName: "",
          subjectId: "",
          chapterId: "",
          showOrder: "",
          status: "",
          courseDetails: {
            courseDetailsId: "",
            courseId: "",
            courseUrl: "",
            courseTime: "",
            courseSize: "",
            courseScore: 5.0,
            courseTotal: "",
            status: "",
            vip: ""
          }
        },
        //资料信息
        tmpCourseData: {
          courseDataId: "",
          courseId: "",
          dataName: "",
          dataUrl: "",
          dataType: "",
          showOrder: "",
          status: ""
        }
      }
    },
    methods: {
      //上传文件，调用File组件
      uploadFile: function () {
        this.Bus.$emit("my-event-file-upload", {
          fromComponent: "updateCourse"
        })
      },
      //折叠面板改变  折叠面板数组
      changeCollapse: function (array) {
        let length = array.length
        for (let i = 0; i < length; i++) {
          if (array[i] == "资料") {
            this.getCourseData();
          } else if (array[i] == "题目") {

          } else if (array[i] == "评价") {

          }
        }
      },
      //返回
      goBack: function () {
        this.$router.go(-1)
      },
      //vip转换
      setVip: function () {
        if (this.vipFlag == "否") {
          this.course.courseDetails.vip = 0
        } else if (this.vipFlag == "是") {
          this.course.courseDetails.vip = 1
        }
      },
      //保存课时
      updateCourse: function () {
        this.setVip();

        let data = {
          courseName: this.course.courseName,
          courseDetails: {
            courseDetailsId: this.course.courseDetails.courseDetailsId,
            courseId: this.course.courseDetails.courseId,
            courseUrl: this.course.courseDetails.courseUrl,
            courseTime: this.course.courseDetails.courseTime,
            courseScore: this.course.courseDetails.courseScore,
            vip: this.course.courseDetails.vip,
          }
        }
        this.axios.put(`/course/course/course/${this.courseId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "保存成功",
                desc: "课时信息"
              })
              //重新请求
              this.init();
            }
          })
      },
      //保存资料
      addData: function () {
        let array = new Array();
        for (let i of this.courseData) {
          if (i.dataName.trim() == "" && i.dataUrl.trim() == "") {
            this.$Notice.error({
              title: "资料不能为空"
            })
            return false
          }
          let tmp = {
            dataName: i.dataName.trim(),
            dataUrl: i.dataUrl.trim()
          }
          array.push(tmp)
        }
        this.axios.put(`/course/courseData/courseDataList/${this.courseId}`, array)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "保存成功",
                desc: "课时资料"
              })
              //重新请求
              this.getCourseData()
            }
          })
      },
      //课时资料
      orderData: function () {
        this.getCourseData()
        this.orderDataTipPanel = true
      },
      //资料拖拽排序
      showOrderData: function (from, to) {
        let fromObj = this.courseData[from];
        let toObj = this.courseData[to];

        this.$set(this.courseData, from, toObj)
        this.$set(this.courseData, to, fromObj)
      },
      //资料排序
      okOrderData: function () {
        let array = new Array();
        let length = this.courseData.length;
        for (let i = 0; i < length; i++) {
          let courseData = this.courseData[i];
          let tmp = {
            courseDataId: courseData.courseDataId,
            showOrder: i
          }
          array.push(tmp)
        }
        this.axios.put(`/course/courseData/courseData/order`, array)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "排序成功",
                desc:"课时资料"
              })
              //重新请求
              this.getCourseData()
            }
          })
      },
      //取消资料排序
      cancelOrderData: function () {
        this.getCourseData()
      },
      //添加课时资料
      addCourseData: function () {
        let length = this.courseData.length;
        let courseData = {
          courseDataId: "",
          courseId: "",
          dataName: "",
          dataUrl: "",
          dataType: "",
          showOrder: "",
          status: ""
        }
        this.$set(this.courseData, length, courseData)
      },
      //删除课时资料
      delCourseData: function (index) {
        this.courseData.splice(index, 1)
      },
      //打开课时资料
      openCourseDataUrl: function (url) {
        window.open(url, "_blank");
      },
      //保存问题
      addQuestion: function () {

      },
      //查询课时信息和详细信息
      getCourseAndDetails: function () {
        //请求课程详细信息
        this.axios.get(`/course/course/course/details/${this.courseId}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.course = resp.data.data;
              //会员状态
              let vip = this.course.courseDetails.vip;
              if (vip == 0) {
                this.vipFlag = "否"
              } else if (vip == 1) {
                this.vipFlag = "是"
              }
            }
          })
      },
      //查询资料列表
      getCourseData: function () {
        this.axios.get(`/course/courseData/courseDataList/${this.courseId}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.courseData = resp.data.data
            }
          })
      }
    },
    mounted() {
      this.getCourseAndDetails();
      //文件上传，监听回传
      this.Bus.$on("my-event-file-updateCourse", (data) => {
        this.fileInfo.file = data.file
        this.fileInfo.fileUrl = data.fileUrl
        this.fileInfo.resp = data.resp
        //如果上传成功，输入框URL默认填充网络URL
        this.course.courseDetails.courseUrl = this.fileInfo.fileUrl
      })
    }
  }
</script>

<style scoped>
  .updateCourse {

  }

  /*保存*/
  .collapse-header {
    float: right;
    margin-right: 20px;
    height: 100%;
  }

  .collapse-header-data-order {
    background-color: #ffad33;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
  }

  /*视频上传box*/
  .collapse-inputBox {
    overflow: hidden;
  }

  /*视频上传*/
  .collapse-inputBox .style {
    margin: 20px 0px 20px 15px;
    width: 300px;
    height: 120px;
    border: 1px dotted #3399FF;
    border-radius: 6px;
    font-size: 16px;
    color: #FF0000;
    text-align: center;
    float: left;
  }

  /*上传图片样式*/
  .collapse-inputBox .style img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 5px auto 0px;
  }

  /*预览*/
  .collapse-inputBox .preview {
    margin: 20px 10px 20px 10px;
    width: 300px;
    height: 120px;
    border-radius: 6px;
    float: right;
  }

  /*详情盒子*/
  .collapse-details-box {
    overflow: hidden;
    margin-left: 10px;
  }

  .collapse-details-box .left {
    float: left;
  }

  /*文字*/
  .collapse-details-box .left .text {
    width: 100px;
    height: 30px;
    margin-top: 20px;
    line-height: 30px;
    font-size: 18px;
    text-align: right;
  }

  .collapse-details-box .right {
    float: left;
  }

  /*课时名称*/
  .collapse-details-box .right .input {
    width: 800px;
    margin-top: 19px;
  }

  /*课时评分*/
  .collapse-details-box .right .score {
    width: 100px;
    margin-top: 18px;
  }

  /*课时时长*/
  .collapse-details-box .right .time {
    width: 100px;
    margin-top: 19px;
  }

  /*vip*/
  .collapse-details-box .right .radio {
    width: 100px;
    margin-top: 18px;
  }

  /*课时资料*/
  .collapse-data-table-box {

  }

  /*课时资料 头*/
  .collapse-data-table-box .header {
    overflow: hidden;
    margin-bottom: 10px;
  }

  /*课时资料 头 div*/
  .collapse-data-table-box .header div {
    float: left;
    font-size: 16px;
    font-weight: bolder;
    font-family: Arial;
  }

  /*资料名称*/
  .collapse-data-table-box .header .name {
    margin-left: 60px;
  }

  /*资料url*/
  .collapse-data-table-box .header .url {
    margin-left: 240px;
  }

  /*资料type*/
  .collapse-data-table-box .header .type {
    margin-left: 200px;
  }

  /*资料order*/
  .collapse-data-table-box .header .order {
    margin-left: 200px;
  }

  .modal-warning {
    display: inline-block;
    margin: 0px 5px;
    color: #FF0000
  }
</style>
